<!-- Settings Form -->
<div class="settings-content">
    <form class="form-horizontal" id="settings-form" data-toggle="validator" role="form">
    <div class="row">
        <div class="col-xs-12">
            <ul class="nav nav-tabs">
                <li class="active">
                    <a data-toggle="tab" href="#wallet"><i class="fa fa-bitcoin"></i> Wallet</a></li>
                <li><a data-toggle="tab" href="#preferences"><i class="fa fa-cog"></i> Preferences</a></li>
                <!-- <li><a data-toggle="tab" href="#apikeys"><i class="fa fa-key"></i> API Keys</a></li> -->
                <li><a data-toggle="tab" href="#servers"><i class="fa fa-server"></i> Server Settings</a></li>
            </ul>
            <div class="tab-content" style="border: 1px solid #ccc; border-top: 0px !important;padding: 10px">
                <!-- Wallet Settings -->
                <div id="wallet" class="tab-pane active">
                    <fieldset>
                        <div class="form-group">
                            <label for="passphrase" class="col-sm-3 control-label no-right-padding">
                                Passphrase
                                <a href="#" data-toggle="tooltip" title='This is the 12-word passphrase that enables you to access all your funds' class="pull-right"><i class="fa fa-lg fa-question-circle-o margin-top-5" ></i></a>
                            </label>
                            <div class="col-sm-9">
                                <div class="input-group">
                                    <input type="password" class="form-control" autocomplete="off" name="passphrase" id="passphrase" placeholder="Current Passphrase" value="word word word word word word word word word word word word" readonly >
                                    <a href="#" class="input-group-addon" id="settings-passphrase"><i class="fa fa-eye"></i></a>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="address" class="col-sm-3 control-label no-right-padding">
                                Address
                                <a href="#" data-toggle="tooltip" title='This is the current wallet address' class="pull-right"><i class="fa fa-lg fa-question-circle-o margin-top-5" ></i></a>
                            </label>
                            <div class="col-sm-9">
                                <div class="input-group">
                                    <input type="text" class="form-control" name="address"  id="settings-address" placeholder="Current Address" readonly>
                                    <a class="input-group-addon" id="settings-address-icon"><i class="fa fa-edit"></i></a>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="settings-address-label" class="col-sm-3 control-label no-right-padding">
                                Label
                                <a href="#" data-toggle="tooltip" title='This is the name or label you would like to use for the current address' class="pull-right"><i class="fa fa-lg fa-question-circle-o margin-top-5" ></i></a>
                            </label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" name="settings-address-label"  id="settings-address-label" placeholder="Address Label">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="network" class="col-sm-3 control-label no-right-padding">
                                Network
                                <a href="#" data-toggle="tooltip" title='This determines which bitcoin network you would prefer to use' class="pull-right"><i class="fa fa-lg fa-question-circle-o margin-top-5" ></i></a>
                            </label>
                            <select class="col-sm-9 selectpicker" name="network" id="settings-network">
                                <option value="1">Bitcoin Core (Mainnet)</option>
                                <option value="2">Bitcoin Core (Testnet)</option>
                            </select>
                        </div>
                    </fieldset>
                </div>
                <!-- General Preferences -->
                <div id="preferences" class="tab-pane">
                    <fieldset>
                        <div class="form-group">
                            <label for="wallet-autolock" class="col-sm-3 control-label no-right-padding">
                                Auto-Lock
                                <a href="#" data-toggle="tooltip" title='This is the amount of time before the wallet automatically locks' class="pull-right"><i class="fa fa-lg fa-question-circle-o margin-top-5" ></i></a>
                            </label>
                            <select class="col-sm-9 selectpicker"  name="wallet-autolock" id="wallet-autolock">
                                <option value="1">1 minute</option>
                                <option value="5">5 minutes</option>
                                <option value="10">10 minutes</option>
                                <option value="15">15 minutes</option>
                                <option value="30">30 minutes</option>
                                <option value="60">60 minutes</option>
                                <option value="0">Disabled - Do Not Auto-Lock</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="current-theme" class="col-sm-3 control-label no-right-padding">
                                Theme
                                <a href="#" data-toggle="tooltip" title='This is the current theme being used' class="pull-right"><i class="fa fa-lg fa-question-circle-o margin-top-5" ></i></a>
                            </label>
                            <select class="col-sm-9 selectpicker" name="current-theme"  id="current-theme">
                                <option>Default</option>
                                <option>Coming soon...</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="current-currency" class="col-sm-3 control-label no-right-padding">
                                Currency
                                <a href="#" data-toggle="tooltip" title='This is the current currency being used to display fiat values' class="pull-right"><i class="fa fa-lg fa-question-circle-o margin-top-5" ></i></a>
                            </label>
                            <select class="col-sm-9 selectpicker" name="current-currency"  id="current-currency">
                                <option data-icon="fa fa-usd">US Dollar</option>
                                <option>Coming soon...</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="current-language" class="col-sm-3 control-label no-right-padding">
                                Language
                                <a href="#" data-toggle="tooltip" title='This is the current language being used in the wallet' class="pull-right"><i class="fa fa-lg fa-question-circle-o margin-top-5" ></i></a>
                            </label>
                            <select class="col-sm-9 selectpicker"  name="current-language" id="current-language">
                                <option>English</option>
                                <option>Coming soon...</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="current-priority" class="col-sm-3 control-label no-right-padding">
                                Fee Priority
                                <a href="#" data-toggle="tooltip" title='This is the default fee priority that you would like to use' class="pull-right"><i class="fa fa-lg fa-question-circle-o margin-top-5" ></i></a>
                            </label>
                            <select class="col-sm-9 selectpicker" name="current-priority" id="current-priority">
                                <option>High</option>
                                <option>Medium</option>
                                <option>Low</option>
                                <option>Custom</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="minimum-tx-fee" class="col-sm-3 control-label no-right-padding">
                                Minimum Fee
                                <a href="#" data-toggle="tooltip" title='This is the minimum transaction fee you want to pay on any transaction' class="pull-right"><i class="fa fa-lg fa-question-circle-o margin-top-5" ></i></a>
                            </label>
                            <div class="col-sm-9">
                                <div class="input-group">
                                    <input type="text" class="form-control" name="minimum-tx-fee" id="minimum-tx-fee" placeholder="Minimum Transaction Fee">
                                    <a href="#" class="input-group-addon" id="reset-min-fee">Reset</a>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="unconfirmed-utxos" class="col-sm-3 control-label no-right-padding">
                                UTXO Usage 
                                <a href="#" data-toggle="tooltip" title='This is where you decide if you want to use unconfirmed UTXOS in transactions, or only confirmed UTXOS' class="pull-right"><i class="fa fa-lg fa-question-circle-o margin-top-5" ></i></a>
                            </label>
                            <select class="col-sm-9 selectpicker" name="unconfirmed-utxos" id="unconfirmed-utxos">
                                <option value="1">All Available</option>
                                <option value="0">Only Confirmed</option>
                            </select>
                        </div>
                    </fieldset>
                    <fieldset>
                        <legend>Automatic Donation System</legend>
                        <div class="form-group">
                            <label for="donate-status" class="col-sm-3 control-label no-right-padding">
                                Auto-Donate
                                <a href="#" data-toggle="tooltip" title='This is where you choose how often to donate, or to disable the donation system' class="pull-right"><i class="fa fa-lg fa-question-circle-o margin-top-5" ></i></a>
                            </label>
                            <select class="col-sm-9 selectpicker" name="donate-status" id="donate-status">
                                <option value="1">Enabled</option>
                                <option value="75">On 75% of transactions</option>
                                <option value="50">On 50% of transactions</option>
                                <option value="25">On 25% of transactions</option>
                                <option value="0">Disabled - Do Not Donate</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="donate-cause" class="col-sm-3 control-label no-right-padding">
                                Cause
                                <a href="#" data-toggle="tooltip" title='This is what cause you would like your donations to support' class="pull-right"><i class="fa fa-lg fa-question-circle-o margin-top-5" ></i></a>
                            </label>
                            <select class="col-sm-9 selectpicker" name="donate-cause" id="donate-cause">
                                <option value="1">Freewallet Development Fund</option>
                                <option value="1">TokenScan.io Server Hosting Fund</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="donate-amount" class="col-sm-3 control-label no-right-padding">
                                Amount
                                <a href="#" data-toggle="tooltip" title='This is the amount of BTC to use on donation transactions' class="pull-right"><i class="fa fa-lg fa-question-circle-o margin-top-5" ></i></a>
                            </label>
                            <div class="col-sm-9">
                                <div class="input-group">
                                    <input type="text" class="form-control" name="donate-amount" id="donate-amount" placeholder="Default Size (0.00001000)" style="width:200px">
                                    <a class="input-group-addon border-left-0 border-right-0 "><i class="fa fa-usd"></i></a>
                                    <input type="text" class="form-control" name="donate-value" id="donate-value" placeholder="0.00" readonly>
                                    <a href="#" class="input-group-addon" id="reset-donate-amount">Reset</a>
                                </div>
                            </div>
                        </div>
                    </fieldset>
                    <fieldset>
                        <legend>Advanced Settings</legend>
                        <div class="form-group">
                            <label for="regular-dust-size" class="col-sm-3 control-label no-right-padding">
                                Regular Dust Size
                                <a href="#" data-toggle="tooltip" title='This is the amount of dust used in most outputs' class="pull-right"><i class="fa fa-lg fa-question-circle-o margin-top-5" ></i></a>
                            </label>
                            <div class="col-sm-9">
                                <div class="input-group">
                                    <input type="text" class="form-control" name="regular-dust-size" id="regular-dust-size" placeholder="Default Size (0.00000546)" style="width:200px">
                                    <a class="input-group-addon border-left-0 border-right-0 "><i class="fa fa-usd"></i></a>
                                    <input type="text" class="form-control" name="regular-dust-value" id="regular-dust-value" placeholder="0.00" readonly>
                                    <a href="#" class="input-group-addon" id="reset-regular-dust-size">Reset</a>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="multisig-dust-size" class="col-sm-3 control-label no-right-padding">
                                Multisig Dust Size
                                <a href="#" data-toggle="tooltip" title='This is the amount of dust used in multisig outputs' class="pull-right"><i class="fa fa-lg fa-question-circle-o margin-top-5" ></i></a>
                            </label>
                            <div class="col-sm-9">
                                <div class="input-group">
                                    <input type="text" class="form-control" name="multisig-dust-size" id="multisig-dust-size" placeholder="Default Size (0.00007800)" style="width:200px">
                                    <a class="input-group-addon border-left-0 border-right-0 "><i class="fa fa-usd"></i></a>
                                    <input type="text" class="form-control" name="multisig-dust-value" id="multisig-dust-value" placeholder="0.00" readonly>
                                    <a href="#" class="input-group-addon" id="reset-multisig-dust-size">Reset</a>
                                </div>
                            </div>
                        </div>

                    </fieldset>
                </div>
                <!-- API Keys -->
                <!--
                <div id="apikeys" class="tab-pane">
                    <fieldset>
                        <div class="form-group">
                            <label for="api-key-pastebin" class="col-sm-3 control-label no-right-padding">
                                Pastebin
                                <a href="#" data-toggle="tooltip" title='This is the API key for the pastebin.com API' class="pull-right"><i class="fa fa-lg fa-question-circle-o margin-top-5" ></i></a>
                            </label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" name="api-key-pastebin" id="api-key-pastebin">
                            </div>
                        </div>
                    </fieldset>
                </div>
                -->
                <!-- Server Settings -->
                <div id="servers" class="tab-pane">
                    <fieldset>
                        <legend>
                            Mainnet
                            <a href="#" id="reset-server-settings" class="btn btn-xs btn-info pull-right">Reset to Defaults</a>
                        </legend>
                        <div class="form-group">
                            <label for="mainnet-api-host" class="col-sm-3 control-label no-right-padding">
                                API Host
                                <a href="#" data-toggle="tooltip" title='This is the hostname where the explorer API can be accessed' class="pull-right"><i class="fa fa-lg fa-question-circle-o margin-top-5" ></i></a>
                            </label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" name="mainnet-api-host" id="mainnet-api-host" placeholder="tokenscan.io" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="mainnet-api-ssl" class="col-sm-3 control-label no-right-padding">
                                API SSL
                                <a href="#" data-toggle="tooltip" title='This determines if requests to the explorer API use http or https (ssl)' class="pull-right"><i class="fa fa-lg fa-question-circle-o margin-top-5" ></i></a>
                            </label>
                            <select class="col-sm-9 selectpicker" name="mainnet-api-ssl" id="mainnet-api-ssl">
                                <option value="1">Yes</option>
                                <option value="0">No</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="mainnet-cp-host" class="col-sm-3 control-label no-right-padding">
                                CP Host
                                <a href="#" data-toggle="tooltip" title='This is the hostname where the Counterparty API can be accessed' class="pull-right"><i class="fa fa-lg fa-question-circle-o margin-top-5" ></i></a>
                            </label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" name="mainnet-cp-host" id="mainnet-cp-host" placeholder="public.tokenscan.io" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="mainnet-cp-port" class="col-sm-3 control-label no-right-padding">
                                CP Port
                                <a href="#" data-toggle="tooltip" title='This is the port to use when communicating with the Counterparty API' class="pull-right"><i class="fa fa-lg fa-question-circle-o margin-top-5" ></i></a>
                            </label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" name="mainnet-cp-port" id="mainnet-cp-port" placeholder="4000" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="mainnet-cp-user" class="col-sm-3 control-label no-right-padding">
                                CP User
                                <a href="#" data-toggle="tooltip" title='This is the username used to authenticate to the Counterparty API' class="pull-right"><i class="fa fa-lg fa-question-circle-o margin-top-5" ></i></a>
                            </label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" name="mainnet-cp-user" id="mainnet-cp-user" placeholder="rpc" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="mainnet-cp-pass" class="col-sm-3 control-label no-right-padding">
                                CP Pass
                                <a href="#" data-toggle="tooltip" title='This is the password used to authenticate to the Counterparty API' class="pull-right"><i class="fa fa-lg fa-question-circle-o margin-top-5" ></i></a>
                            </label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" name="mainnet-cp-pass" id="mainnet-cp-pass" placeholder="rpc" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="mainnet-cp-ssl" class="col-sm-3 control-label no-right-padding">
                                CP SSL
                                <a href="#" data-toggle="tooltip" title='This determines if requests to the Counterparty API use http or https (ssl)' class="pull-right"><i class="fa fa-lg fa-question-circle-o margin-top-5" ></i></a>
                            </label>
                            <select class="col-sm-9 selectpicker" name="mainnet-cp-ssl" id="mainnet-cp-ssl">
                                <option value="1">Yes</option>
                                <option value="0">No</option>
                            </select>
                        </div>
                    </fieldset>
                    <fieldset>
                        <legend>Testnet</legend>
                        <div class="form-group">
                            <label for="testnet-api-host" class="col-sm-3 control-label no-right-padding">
                                API Host
                                <a href="#" data-toggle="tooltip" title='This is the hostname where the explorer API can be accessed' class="pull-right"><i class="fa fa-lg fa-question-circle-o margin-top-5" ></i></a>
                            </label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" name="testnet-api-host" id="testnet-api-host" placeholder="testnet.tokenscan.io" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="mainnet-api-ssl" class="col-sm-3 control-label no-right-padding">
                                API SSL
                                <a href="#" data-toggle="tooltip" title='This determines if requests to the explorer API use http or https (ssl)' class="pull-right"><i class="fa fa-lg fa-question-circle-o margin-top-5" ></i></a>
                            </label>
                            <select class="col-sm-9 selectpicker" name="testnet-api-ssl" id="testnet-api-ssl">
                                <option value="1">Yes</option>
                                <option value="0">No</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="testnet-cp-host" class="col-sm-3 control-label no-right-padding">
                                CP Host
                                <a href="#" data-toggle="tooltip" title='This is the hostname where the Counterparty API can be accessed' class="pull-right"><i class="fa fa-lg fa-question-circle-o margin-top-5" ></i></a>
                            </label>
                            <div class="col-sm-9">
                              <input type="text" class="form-control" name="testnet-cp-host" id="testnet-cp-host" placeholder="public.tokenscan.io" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="testnet-cp-port" class="col-sm-3 control-label no-right-padding">
                                CP Port
                                <a href="#" data-toggle="tooltip" title='This is the port to use when communicating with the Counterparty API' class="pull-right"><i class="fa fa-lg fa-question-circle-o margin-top-5" ></i></a>
                            </label>
                            <div class="col-sm-9">
                              <input type="text" class="form-control" name="testnet-cp-port" id="testnet-cp-port" placeholder="14000" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="testnet-cp-user" class="col-sm-3 control-label no-right-padding">
                                CP User
                                <a href="#" data-toggle="tooltip" title='This is the username used to authenticate to the Counterparty API' class="pull-right"><i class="fa fa-lg fa-question-circle-o margin-top-5" ></i></a>
                            </label>
                            <div class="col-sm-9">
                              <input type="text" class="form-control" name="testnet-cp-user" id="testnet-cp-user" placeholder="rpc" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="testnet-cp-pass" class="col-sm-3 control-label no-right-padding">
                                CP Pass
                                <a href="#" data-toggle="tooltip" title='This is the password used to authenticate to the Counterparty API' class="pull-right"><i class="fa fa-lg fa-question-circle-o margin-top-5" ></i></a>
                            </label>
                            <div class="col-sm-9">
                              <input type="text" class="form-control" name="testnet-cp-pass" id="testnet-cp-pass" placeholder="1234" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="testnet-cp-ssl" class="col-sm-3 control-label no-right-padding">
                                CP SSL
                                <a href="#" data-toggle="tooltip" title='This determines if requests to the Counterparty API use http or https (ssl)' class="pull-right"><i class="fa fa-lg fa-question-circle-o margin-top-5" ></i></a>
                            </label>
                            <select class="col-sm-9 selectpicker" name="testnet-cp-ssl" id="testnet-cp-ssl">
                                <option value="1">Yes</option>
                                <option value="0">No</option>
                            </select>
                        </div>
                    </fieldset>
                </div>
            </div>            
        </div>
    </div>
    </form>
<br/><br/>
</div>

<script>
// Define possible networks
var networks = ['mainnet','testnet'];

// Handle displaying current server settings
function displayServerSettings(){
    $.each(networks,function(idx, name){
        var o = FW.WALLET_SERVER_INFO[name];
        $('#' + name + '-cp-host').val(o.host);
        $('#' + name + '-cp-port').val(o.port);
        $('#' + name + '-cp-user').val(o.user);
        $('#' + name + '-cp-pass').val(o.pass);
        $('#' + name + '-cp-ssl').val((o.ssl) ? 1 : 0);
        $('#' + name + '-api-host').val(o.api_host);
        $('#' + name + '-api-ssl').val((o.api_ssl) ? 1 : 0);
    });
}

$(document).ready(function(){
    var ls = localStorage,
        ss = sessionStorage;

    // Load the wallet address information
    $('#settings-address').val(FW.WALLET_ADDRESS);
    $('#settings-network').val(FW.WALLET_NETWORK);
    $('#settings-address-label').val(FW.WALLET_ADDRESS_LABEL);

    // Display current server settings
    displayServerSettings();

    // Initialize any tooltips
    $('[data-toggle="tooltip"]').tooltip({ 
        html: true,
        placement: 'bottom'
    }); 

    // Detect any server settings changes and treat as if user submited form
    $('#servers input, #servers select').change(function(){
        $('#settings-form').submit();
    });

    // Set auto-lock field 
    $('#wallet-autolock').val(FW.WALLET_AUTOLOCK);

    // Set fee priority based on current value
    var val = ls.getItem('feePriority') || 'High';
    $('#current-priority').val(val);

    // Set UTXO usage value based on current value
    $('#unconfirmed-utxos').val(FW.UNCONFIRMED_UTXOS);

    var fee = numeral(FW.MINIMUM_TX_FEE * 0.00000001).format('0.00000000');
    $('#minimum-tx-fee').val(fee);

    // Restore any API keys
    $('#api-key-pastebin').val(ls.getItem('apiKeyPastebin'));


    // Make any selects look nicer by using dialog-select
    $('.selectpicker').selectpicker({
        style: 'btn-default btn-block',
        size: 5
    });

    // Save fee priority when it changes
    $('#current-priority').change(function(e){
        var val = $(this).val();
        ls.setItem('feePriority', val);
    });

    // Save pastebin.com API key
    $('#api-key-pastebin').change(function(){
        var val = $(this).val();
        ls.setItem('apiKeyPastebin', val);
    });

    // Handle resetting the minimum fee
    $('#reset-min-fee').click(function(){
        FW.MINIMUM_TX_FEE = FW.MINIMUM_TX_FEE_DEFAULT;
        var fee = numeral(FW.MINIMUM_TX_FEE * 0.00000001).format('0.00000000');
        $('#minimum-tx-fee').val(fee);
        ls.removeItem('feeMinimum');
    });

    // Handle making sure minimum fee is within sane ranges (250-10,000 satoshis)
    $('#minimum-tx-fee').change(function(){
        var el   = $(this);
            val  = el.val(),
            sats = numeral(numeral(val).format('0.00000000').split('.')[1]).format('0'),
            min  = 250,
            max  = 10000;
        // Force format to 0.00000000
        el.val(numeral(val).format('0.00000000'));
        var errors = [];
        if(sats < min)
            errors.push('Minimum Fee is below minmum of ' + numeral(min).format('0,0') + ' satoshis!');
        if(sats > max)
            errors.push('Minimum Fee is above maximum of ' + numeral(max).format('0,0') + ' satoshis!');
        // Display any error message
        if(errors.length){
            dialogMessage('<i class="fa fa-lg fa-fw fa-exclamation-circle"></i> Error(s)', errors.join('<br/>'));
            // Reset displayed fee to current setting
            var fee = numeral(FW.MINIMUM_TX_FEE * 0.00000001).format('0.00000000');
            $('#minimum-tx-fee').val(fee);
        } else {
            // Update minimum fee and save setting
            FW.MINIMUM_TX_FEE = sats;
            ls.setItem('feeMinimum', sats);
            dialogMessage('<i class="fa fa-lg fa-fw fa-floppy-o"></i> Minimum Fee Saved', 'Your minimum fee information has been successfully saved.');
        }
    });

    // Handle form validation
    $('#settings-form').validator().on('submit', function(e){
        // handle the invalid form
        if(e.isDefaultPrevented()){
            dialogMessage('<i class="fa fa-lg fa-fw fa-info-circle"></i> Error', 'Please fill out all required fields indicated in red.');
        } else {
            e.preventDefault();
            // Loop through form data and build out data array
            var arr  = $(this).serializeArray(),
                data = {};
            $(arr).each(function(index, obj){
                data[obj.name] = obj.value;
            });
            // Build out the server data object
            var o = {};
            $.each(networks,function(idx, name){
                o[name] = {
                    host: data[name + '-cp-host'],
                    port: data[name + '-cp-port'],
                    user: data[name + '-cp-user'],
                    pass: data[name + '-cp-pass'],
                    ssl: (data[name + '-cp-ssl']=='1') ? true : false,
                    api_host: data[name + '-api-host'],
                    api_ssl: (data[name + '-api-ssl']=='1') ? true : false,
                };
            });
            // Save updated server information
            FW.WALLET_SERVER_INFO = o;
            ls.setItem('serverInfo',JSON.stringify(o));
            // Handle setting the explorer URL
            setExplorerAPI();
            // dialogMessage('<i class="fa fa-lg fa-fw fa-info-circle"></i> Information Saved', 'Your server information has been successfully saved.');
        }
    });

    // Show change/edit address list form when user clicks the edit icon
    $('#settings-address-icon').click($.debounce(100,function(e){
        dialogChangeAddress();
    }));

    // Show change/edit address list form when user clicks the qrcode/address 
    $('#settings-address-label').change(function(e){
        var label = $(this).val();
        setWalletAddressLabel(FW.WALLET_ADDRESS, label);
        dialogMessage('<i class="fa fa-lg fa-fw fa-floppy-o"></i> Address Label Saved', 'Your address label information has been successfully saved.');
    });

    // Show passphrase dialog box when user clicks passphrase view button
    $('#settings-passphrase').click($.debounce(100,function(e){
        // Make sure wallet is unlocked
        if(dialogCheckLocked('view your wallet passphrase'))
            return;
        dialogPassphrase();
    }));

    // Handle updating the network
    $('#settings-network').change(function(){
        // Make sure wallet is unlocked
        if(dialogCheckLocked('change wallet networks'))
            return;
        var net = $(this).val();
        setWalletNetwork(net);
    });

    // Handle Updating the auto-lock function
    $('#wallet-autolock').change(function(){
        // Make sure wallet is unlocked
        if(dialogCheckLocked('change wallet auto-lock time'))
            return;
        var val = $(this).val();
        FW.WALLET_AUTOLOCK = val;
        ls.setItem('walletAutoLock', FW.WALLET_AUTOLOCK);
    });

    // Handle saving regular dust size on change
    $('#regular-dust-size').change(function(e){
        var val = $(this).val(),
            usd = $('#regular-dust-value'),
            btc = getAssetPrice('BTC',true),
            errors = [];
        if(val==''){
            FW.DUST_SIZE_REGULAR = false;
            ls.removeItem('dustSizeRegular');
        } else {
            // Auto-convert integers into sats
            if(val>=1)
                val = val * 0.00000001;
            // Convert from 0.00000000 to sats format
            sats = parseInt(val * 100000000);
            // Throw error if user goes over max 
            var max = 100000,
                min = 546;
            if(sats>max)
                errors.push('Maximum dust value is  ' + numeral(max * 0.00000001).format('0,0.00000000') + '!');
            if(sats<min)
                errors.push('Minimum dust value is  ' + numeral(min * 0.00000001).format('0,0.00000000') + '!');
            // Display any error message
            if(errors.length){
                dialogMessage('<i class="fa fa-lg fa-fw fa-exclamation-circle"></i> Error(s)', errors.join('<br/>'));
                // Reset displayed fee to current setting
                FW.DUST_SIZE_REGULAR = false;
                ls.removeItem('dustSizeRegular');
                $(this).val('');
            } else {
                FW.DUST_SIZE_REGULAR = sats;
                ls.setItem('dustSizeRegular', sats);
                $(this).val(numeral(val).format('0.00000000'));
                usd.val(numeral(val * btc.price_usd).format('0.00'));
            }
        }
    });

    // Handle resetting regular dust size
    $('#reset-regular-dust-size').click(function(){
        FW.DUST_SIZE_REGULAR = false;
        $('#regular-dust-size').val('');
        $('#regular-dust-value').val('0.00');
        ls.removeItem('dustSizeRegular');
    });

    // Handle saving multisig dust size on change
    $('#multisig-dust-size').change(function(e){
        var val    = $(this).val(),
            usd    = $('#multisig-dust-value'),
            btc    = getAssetPrice('BTC',true),
            errors = [];
        if(val==''){
            FW.DUST_SIZE_MULTISIG = false;
            ls.removeItem('dustSizeMultisig');
        } else {
            // Auto-convert integers into sats
            if(val>=1)
                val = val * 0.00000001;
            // Convert from 0.00000000 to sats format
            sats = parseInt(val * 100000000);
            // Throw error if user goes over max 
            var max = 100000,
                min = 546;
            if(sats>max)
                errors.push('Maximum dust value is  ' + numeral(max * 0.00000001).format('0,0.00000000') + '!');
            if(sats<min)
                errors.push('Minimum dust value is  ' + numeral(min * 0.00000001).format('0,0.00000000') + '!');
            // Display any error message
            if(errors.length){
                dialogMessage('<i class="fa fa-lg fa-fw fa-exclamation-circle"></i> Error(s)', errors.join('<br/>'));
                // Reset displayed fee to current setting
                FW.DUST_SIZE_MULTISIG = false;
                ls.removeItem('dustSizeMultisig');
                $(this).val('');
            } else {
                FW.DUST_SIZE_MULTISIG = sats;
                ls.setItem('dustSizeMultisig', sats);
                $(this).val(numeral(val).format('0.00000000'));
                usd.val(numeral(val * btc.price_usd).format('0.00'));
            }
        }
    });

    // Handle resetting multisig dust size
    $('#reset-multisig-dust-size').click(function(){
        FW.DUST_SIZE_MULTISIG = false;
        $('#multisig-dust-size').val('');
        $('#multisig-dust-value').val('0.00');
        ls.removeItem('dustSizeMultisig');
    });    

    // Save UTXO preferences when it changes
    $('#unconfirmed-utxos').change(function(e){
        var val = $(this).val();
        FW.UNCONFIRMED_UTXOS = val;
        ls.setItem('unconfirmedUtxos', val);
    });


    // Load the current dust preferences
    var dust1 = (FW.DUST_SIZE_REGULAR==false) ? '' : numeral(FW.DUST_SIZE_REGULAR * 0.00000001).format('0,0.00000000'),
        dust2 = (FW.DUST_SIZE_MULTISIG==false) ? '' : numeral(FW.DUST_SIZE_MULTISIG* 0.00000001).format('0,0.00000000');
    $('#regular-dust-size').val(dust1).change();
    $('#multisig-dust-size').val(dust2).change();

    // Save donation system status on any change
    $('#donate-status').change(function(e){
        var val = $(this).val();
        FW.DONATE_STATUS = val;
        FW.DONATE_COUNT  = 0; // reset count on any status change
        ls.setItem('donateCount', FW.DONATE_COUNT);
        if(val==1){
            ls.removeItem('donateStatus');
        } else {
            ls.setItem('donateStatus', val);
        }
    });

    // Load the current donation system preferences
    $('#donate-status').selectpicker("val", FW.DONATE_STATUS);

    // Handle saving donation amount on change
    $('#donate-amount').change(function(e){
        var val = $(this).val(),
            usd = $('#donate-value'),
            btc = getAssetPrice('BTC',true),
            errors = [];
        if(val>=1)
            val = val * 0.00000001;
        // Convert from 0.00000000 to sats format
        sats = parseInt(val * 100000000);
        // Throw error if user goes over max 
        var max = 100000,
            min = 546;
        if(sats>max)
            errors.push('Maximum donation value is  ' + numeral(max * 0.00000001).format('0,0.00000000') + '!');
        if(sats<min)
            errors.push('Minimum donation value is  ' + numeral(min * 0.00000001).format('0,0.00000000') + '!');
        // Display any error message
        if(errors.length){
            dialogMessage('<i class="fa fa-lg fa-fw fa-exclamation-circle"></i> Error(s)', errors.join('<br/>'));
            $(this).val(numeral(FW.DONATE_AMOUNT * 0.00000001).format('0,0.00000000'));
        } else {
            FW.DONATE_AMOUNT = sats;
            if(FW.DONATE_AMOUNT==FW.DONATE_DEFAULT){
                ls.removeItem('donateAmount');
            } else {
                ls.setItem('donateAmount', sats);
            }
            $(this).val(numeral(val).format('0.00000000'));
            usd.val(numeral(val * btc.price_usd).format('0.00'));
        }
    });

    // Handle resetting donate amount
    $('#reset-donate-amount').click(function(){
        FW.DONATE_AMOUNT = FW.DONATE_DEFAULT;
        ls.removeItem('donateAmount');
        $('#donate-amount').val(numeral(FW.DONATE_AMOUNT * 0.00000001).format('0,0.00000000')).change();
    });    

    // Load the current donation amount preferences
    $('#donate-amount').val(numeral(FW.DONATE_AMOUNT * 0.00000001).format('0,0.00000000')).change();

    // Handle setting server settings back to the defaults
    $('#reset-server-settings').click(function(){
        // Delete server state from localStorage
        ls.removeItem('serverInfo')
        // Set server info to default server info
        FW.WALLET_SERVER_INFO = FW.WALLET_SERVER_INFO_DEFAULT;
        // Display current server settings
        displayServerSettings();
    });
    // Add default option and update list immediately
    var el   = $('#donate-cause'),
        html = '<option data-content="" value="bc1qd0nateja8l9am8tqpzjn9uazhf6dlp9qer2tra">FreeWallet Development Fund</option>';
    el.html(html);
    el.selectpicker("refresh");
    el.selectpicker("val", FW.DONATE_ADDRESS);

    // Handle updating donation causes list 
    if(FW.DONATE['mainnet'].length){
        var html = '',
            net  = (FW.WALLET_NETWORK==2) ? 'testnet' : 'mainnet';
        FW.DONATE['mainnet'].forEach(function(item){
            html += '<option data-content="' + item.name + '" value="' + item.address + '">' + item.name + '</option>';
        });
        el.html(html);
        el.selectpicker("refresh");
        el.selectpicker("val", FW.DONATE_ADDRESS);
    }

    // Detect an donation cause change and update to use appropriate field
    $('#donate-cause').change(function(e){
        var val = $(this).val();
        FW.DONATE_ADDRESS = val;
        ls.setItem('donateAddress', val);
    });

});
</script>